Angular Material আপনাকে কাস্টম থিম তৈরি করার সুবিধা প্রদান করে, যা অ্যাপ্লিকেশনের ডিজাইন এবং ব্র্যান্ডিংয়ের জন্য বিশেষভাবে উপযোগী। কাস্টম থিম তৈরি করার মাধ্যমে আপনি অ্যাপ্লিকেশনের রঙ, টাইপোগ্রাফি এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।

এটি করতে SCSS (Sassy CSS) ফাইল ব্যবহার করতে হয়, যা Angular Material এর থিমিং সিস্টেমের অংশ। কাস্টম থিম তৈরি করার জন্য আপনাকে primary, accent, এবং warn প্যালেট কনফিগার করতে হবে, এবং তারপর তা আপনার অ্যাপ্লিকেশন জুড়ে প্রয়োগ করতে হবে।

কাস্টম থিম তৈরি করার ধাপসমূহ

১. SCSS ফাইল তৈরি করা

প্রথমে আপনার প্রজেক্টে একটি SCSS ফাইল তৈরি করতে হবে। সাধারণত, src/styles.scss ফাইল ব্যবহার করা হয়। এটি আপনার থিমের মূল ফাইল হবে।

২. Material Theming SCSS মিক্সইন ইমপোর্ট করা

Angular Material এর থিমিং ফিচার ব্যবহার করতে @angular/material/theming প্যাকেজ থেকে থিমিং মিক্সইন এবং ফাংশন ইমপোর্ট করতে হয়।

@import '~@angular/material/theming';

৩. রঙের প্যালেট কনফিগার করা

প্রথমে আপনি আপনার কাস্টম primary, accent, এবং warn রঙের প্যালেট তৈরি করতে পারেন। Angular Material এর আগে থেকে থাকা রঙের প্যালেট যেমন $mat-indigo, $mat-pink, $mat-blue ব্যবহার করা যায়, অথবা আপনি নতুন রঙও সংজ্ঞায়িত করতে পারেন।

// Primary রঙের প্যালেট
$primary: mat-palette($mat-indigo);

// Accent রঙের প্যালেট
$accent: mat-palette($mat-pink);

// Warn রঙের প্যালেট
$warn: mat-palette($mat-red);

৪. কাস্টম থিম তৈরি করা

এখন আপনার কাস্টম থিম তৈরি করতে, উপরের প্যালেটগুলো ব্যবহার করে mat-light-theme অথবা mat-dark-theme মিক্সইন ব্যবহার করতে হবে। এই থিমটি আপনার অ্যাপ্লিকেশনের জন্য স্টাইল ও রঙ নির্ধারণ করবে।

// কাস্টম থিম তৈরি
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn
  ),
));

এছাড়া, আপনি যদি dark theme তৈরি করতে চান, তাহলে mat-dark-theme মিক্সইন ব্যবহার করতে পারেন:

$dark-theme: mat-dark-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn
  ),
));

৫. থিম অ্যাপ্লাই করা

এখন তৈরি করা থিমটি আপনার অ্যাপ্লিকেশনে অ্যাপ্লাই করতে হবে। এর জন্য angular-material-theme মিক্সইন ব্যবহার করতে হবে:

// থিম অ্যাপ্লাই করা
@include angular-material-theme($theme);

অথবা, ডার্ক থিমের জন্য:

// ডার্ক থিম অ্যাপ্লাই করা
@include angular-material-theme($dark-theme);

৬. angular.json ফাইলে SCSS ফাইল যোগ করা

এখন SCSS ফাইলটি আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে হবে। angular.json ফাইলের styles সেকশনে SCSS ফাইলটি যোগ করুন:

"styles": [
  "src/styles.scss"
]

কাস্টম থিমের উন্নত কাস্টমাইজেশন

১. টাইপোগ্রাফি কাস্টমাইজ করা

Angular Material এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের টাইপোগ্রাফি (ফন্ট এবং আকার) কাস্টমাইজ করতে পারেন। এর জন্য mat-typography-config ফাংশন ব্যবহার করা হয়।

// কাস্টম টাইপোগ্রাফি কনফিগারেশন
$typography: mat-typography-config();
@include angular-material-typography($typography);

২. অতিরিক্ত রং কাস্টমাইজ করা

আপনি যদি আরো রং যোগ করতে চান, তাহলে সেই রঙের প্যালেট তৈরি করতে পারেন এবং তা ব্যবহার করতে পারেন:

// নতুন রং যোগ করা
$custom: mat-palette($mat-teal);

// কাস্টম থিমে রঙ যোগ করা
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    custom: $custom
  ),
));

৩. Material Icon কাস্টমাইজেশন

আপনি চাইলে Material Icons কাস্টমাইজ করতে পারেন বা নিজের আইকন ব্যবহার করতে পারেন। Material Icons ব্যবহারের জন্য আপনি HTML ফাইলে এটি যোগ করতে পারেন:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Angular Material এর কাস্টম থিমিং সিস্টেম একটি শক্তিশালী টুল, যা আপনার অ্যাপ্লিকেশনের ডিজাইনকে সহজেই কাস্টমাইজ এবং ব্র্যান্ডের সাথে সামঞ্জস্যপূর্ণ করে তোলে। এটি মূলত রঙের প্যালেট, টাইপোগ্রাফি এবং অন্যান্য ডিজাইন উপাদান কাস্টমাইজ করতে সাহায্য করে। SCSS ফাইল ব্যবহার করে কাস্টম থিম তৈরি করা খুবই সহজ এবং ডেভেলপারদের দ্রুত ডিজাইন পরিবর্তন করার সুবিধা প্রদান করে।